<script setup>
import { tableDataStore } from '@/stores/modules/carStore'

const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
})
const store = tableDataStore()

const formatDateTime = datetime => {
  if (!datetime) return ''
  const date = new Date(datetime)
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${month}-${day} ${hours}:${minutes}`
}
const formatStats = row => {
  return `${row.user_count}拼${row.package_count}包${row.whole_car_count}货${row.empty_count}空`
}
// 表头样式
const headerCellStyle = {
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  height: '48px',
}

// 表格内容样式
const cellStyle = {
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  height: 'auto',
}
</script>

<template>
  <el-table
    :data="data"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    :row-style="{ height: 'auto' }"
    border
  >
    <el-table-column type="index" label="序号" width="100px" />
    <el-table-column prop="driver_name" label="司机名称" width="auto" />
    <el-table-column prop="car_number" label="车牌" width="auto" />
    <el-table-column prop="car_class_name" label="车型" width="auto" />
    <el-table-column prop="order" label="派车情况" width="auto">
      <template #default="{ row }">
        <div class="floating-status-badge" v-if="row.is_man_op">
          <i class="el-icon-user-solid"></i>
          干预
        </div>
        {{ formatStats(row) }}
      </template>
    </el-table-column>
    <el-table-column prop="ask_date" label="报班时间" width="auto">
      <template #default="{ row }">
        {{ formatDateTime(row.ask_date) }}
      </template>
    </el-table-column>
    <el-table-column prop="driver_standby_seq" label="当日边次" width="auto" />
    <el-table-column prop="status" label="智能调度状态" width="auto">
      <template #default="{ row }">
        <span :class="{ 'normal-style': row.status === 0 }">
          {{ row.status === 0 ? '正常' : row.status }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="212px">
      <template #default="scope">
        <div class="link-group">
          <a
            v-for="(link, index) in scope.row.links"
            :key="index"
            :href="link.url"
            @click.prevent="openLink(link.url)"
            target="_blank"
            class="table-link"
            >{{ link.text }}</a
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.el-table {
  width: auto;
  font-size: 26px;
  letter-spacing: 2px;
  .el-table__body-wrapper {
    overflow-x: hidden !important;
  }
  .normal-style {
    color: #67c23a;
  }
  .floating-status-badge {
    position: absolute;
    width: 48px;
    height: 22px;
    padding: 0;
    right: 0;
    top: 0;
    background: #f56c6c;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
.link-group {
  display: flex;
  gap: 24px;
}

.table-link {
  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.table-link:hover {
  text-decoration: underline;
}
</style>
